<template>
<!-- 只读的商品列表，如搜索结果页、推荐商品等 -->
  <!-- 商品列表 -->
  <view class="product-list" v-if="productList.length > 0">
    <view class="product-item" v-for="(item, idx) in productList" :key="idx">
      <view class="product-info">
        <view class="image">
          <navigator :url="'/pages/goods/goods?id=' + item.skuId">
            <image style="width: 100px; height: 100px;" mode="scaleToFill" :src="item.thumbCover"></image>
          </navigator>
        </view>
        <view class="info">
          <navigator :url="'/pages/goods/goods?id=' + item.skuId">
            <view class="name">
              <text class="product-item-name">{{ item.name }}</text>
            </view>
            <view class="title">
              <text class="product-item-title">{{ item.title }}</text>
            </view>
          </navigator>
          <view class="aggregation">
            <view class="price">
              <text class="product-item-price">￥ {{ item.price }}</text>
            </view>
            <view class="sales">
              <text class="product-item-sales">销量: {{ item.sales }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
// 商品列表，如搜索、猜你喜欢
import {ProductItemCls} from "@/types/productcls";


defineProps({
  productList: {
    required: true, type: Array<ProductItemCls>
  }
})
</script>
<style lang="scss">
.product-list {
  padding: 0 5px;
  overflow-y: scroll;

  .product-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .product-info {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid $uni-border-color;
      .image {
        width: 35%;
      }
      .info {
        width: 65%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .product-item-name {
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 10px;
          display: -webkit-box; /* 必须指定为 box */
          -webkit-box-orient: vertical; /* 设置垂直布局 */
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1; /* 限制为两行 */
        }

        .product-item-title {
          font-size: 12px;
          color: #8f939c;
          margin-bottom: 10px;
          display: -webkit-box; /* 必须指定为 box */
          -webkit-box-orient: vertical; /* 设置垂直布局 */
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2; /* 限制为两行 */
        }

        .aggregation {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .product-item-price {
            color: #e43d33;
            font-size: 14px;
          }

          .product-item-sales {
            color: #8f939c;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>